<template>
	<view>
		<!-- 头像名称 -->
		<view class="avatar flex justify-start align-center" @click="jump('account')">
			<image class="a-img" src="/static/test/rb.jpeg"></image>
			<view class="a-text">
				<view class="text1">
					迪丽热巴
				</view>
				<view class="text2" @click.stop="jump('level')">
					升级至2级还需80积分
				</view>
			</view>
		</view>

		<!-- tab选择 -->
		<view class="check-icon flex">
			<view class="icon-item flex-sub flex align-center flex-direction" v-for="(item,index) in icon"
				:key="index" @click="jump(item.jump)">
				<image mode="aspectFit" class="i-img" :src="item.img"></image>
				<text class="i-text">
					{{item.name}}
				</text>
			</view>
		</view>
		
		<view class="border-10"></view>
		
		<!-- 我的订单 -->
		<view class="title flex align-center justify-between" @click="jump('orderList')">
			<view class="item1">
				我的订单
			</view>
			<view class="item2 flex justify-start align-center">
				<text class="text">
					查看全部订单
				</text>
				<image class="img w14 h24" src="/static/store/jiantouyou.png"></image>
			</view>
		</view>
		
		<view class="check-icon flex">
			<view class="icon-item flex-sub flex align-center flex-direction" v-for="(item,index) in iconList"
				:key="index" @click="jump(item.jump)">
				<image mode="aspectFit" class="i-img" :src="item.img"></image>
				<text class="i-text">
					{{item.name}}
				</text>
			</view>
		</view>
		
		<view class="border-10"></view>
		
		
		<!-- 分类icon -->
		<view class="icons flex flex-wrap">
			
			
			<view class="icon-item flex align-center flex-direction" v-for="(item,index) in myList" :key="index"
			@click="jump(item.item)">
				
				<image mode="aspectFit" class="i-img" :src="item.url"></image>
				<text class="i-text">
					{{item.name}}
				</text>
				
			</view>
			
			
		</view>
		
		
		
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				myList:[
					{
						id:0,
						name:'我的拼团',
						url:'/static/mine/wodepintuan.png',
						item:'myPuzzle'
					},
					{
						id:1,
						name:'我的抽奖',
						url:'/static/mine/marketing.png',
						item:'myLuckyDraw'
					},
					{
						id:2,
						name:'我的优惠券',
						url:'/static/mine/youhuiquan.png',
						item:'myCoupon'
					},
					{
						id:3,
						name:'我的收藏',
						url:'/static/mine/shoucang.png',
						item:'myCollection'
					},
					{
						id:4,
						name:'收货地址',
						url:'/static/mine/shouhuodizhi.png',
						item:'addressList'
					},
					{
						id:5,
						name:'积分商场',
						url:'/static/mine/jifen.png',
						item:'pointsMall'
					},
					{
						id:6,
						name:'我的评论',
						url:'/static/mine/pinglun.png',
						item:'myComments'
					},
					{
						id:7,
						name:'常见问题',
						url:'/static/mine/changjianwenti.png',
						item:'commonProblem'
					},
					{
						id:8,
						name:'社区合伙人',
						url:'/static/mine/hehuoren.png',
						item:'partner'
					}
				],
				icon: [{
						id: 0,
						name: '885.00',
						img: '/static/mine/t-yue.png',
					},
					{
						id: 1,
						name: '8',
						img: '/static/mine/t-youhuiquan.png',
					},
					{
						id: 2,
						name: '88',
						img: '/static/mine/t-jifen.png',
					}
				],
				iconList: [{
						id: 0,
						name: '待收款',
						img: '/static/mine/daishoukuan.png',
						jump:'order'
					},
					{
						id: 1,
						name: '待成团',
						img: '/static/mine/daichengtuan.png',
						jump:'footprint'
					},
					{
						id: 2,
						name: '待核销',
						img: '/static/mine/daihexiao.png',
						jump:'brand'
					},
					{
						id: 3,
						name: '待发货',
						img: '/static/mine/daifahuo.png',
						jump:''
					},
					{
						id: 4,
						name: '待评价',
						img: '/static/mine/daipingjia.png',
						jump:''
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			jump(item){
				let routeJump;
				console.log(item,'这个是路由跳转字段')
				switch (item) {
					// 跳转到个人信息
					case 'account':
						routeJump = this.$mRoutesConfig.minePage.accountInformation
						break;
					// 跳转到用户等级
					case 'level':
						routeJump = this.$mRoutesConfig.minePage.userLevel
						break;
					// 跳转到订单列表
					case 'orderList':
						routeJump = this.$mRoutesConfig.minePage.orderList
						break;
					case 'myPuzzle':
						routeJump = this.$mRoutesConfig.minePage.myPuzzle
						break;
					case 'myLuckyDraw':
						routeJump = this.$mRoutesConfig.minePage.myLuckyDraw
						break;
					case 'myCoupon':
						routeJump = this.$mRoutesConfig.minePage.myCoupon
						break;
					case 'myCollection':
						routeJump = this.$mRoutesConfig.minePage.myCollection
						break;
					case 'addressList':
						routeJump = this.$mRoutesConfig.minePage.addressList
						break;
					case 'pointsMall':
						routeJump = this.$mRoutesConfig.distribution.pointsMall
						break;
					case 'myComments':
						routeJump = this.$mRoutesConfig.distribution.myComments
						break;
					case 'commonProblem':
						routeJump = this.$mRoutesConfig.distribution.commonProblem
						break;
					case 'partner':
						routeJump = this.$mRoutesConfig.distribution.partner
						break;
				}
				
				this.$mRouter.push({
					route: routeJump,
					query: {
						a: 1
					}
				})
				
			}

		}
	}
</script>

<style lang="scss">
	// 分类icons
	.icons{
		width:750rpx;
		.icon-item{
			width:25%;
			height:160rpx;
			border-right:1rpx solid #e5e7e5;
			border-bottom:1rpx solid #e5e7e5;
			.i-img {
				width: 58rpx;
				height: 58rpx;
				margin-top: 32rpx;
			}
			
			.i-text {
				font-size: 26rpx;
				font-family: PingFang SC;
				line-height: 32rpx;
				color: #333333;
				margin-top: 12rpx;
			}
		}
	}
	// 我的订单
	.title{
		width:750rpx;
		height:88rpx;
		padding:0 32rpx;
		border-bottom: 1rpx solid #eee;
		.item2{
			font-size: 24rpx;
			color: #bfc8ce;
			.text{
				margin-right: 10rpx;
			}
			
		}
	}
	// 头像名称
	.avatar {
		width: 750rpx;
		height: 180rpx;
		// background: #DC2D20;
		padding: 0 32rpx;

		.a-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.a-text {
			padding-left: 24rpx;
			height: 100rpx;

			.text1 {
				font-size: 36rpx;
				font-family: PingFangSC-Bold;
				line-height: 53rpx;

			}

			.text2 {
				font-size: 30rpx;
				font-family: PingFangSC-Bold;
				line-height: 60rpx;
				color: #656767;
			}
		}
	}

	// icon选择
	.check-icon {
		width: 750rpx;
		height: 160rpx;
		padding: 0 32rpx;
		background-color: white;
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.icon-item {

			.i-img {
				width: 58rpx;
				height: 58rpx;
				margin-top: 36rpx;
			}

			.i-text {
				font-size: 26rpx;
				font-family: PingFang SC;
				line-height: 32rpx;
				color: #333333;
				margin-top: 24rpx;
			}
		}


	}
</style>
